<template>
  <div class="commonBoxmp white-bg">
    <TableV2 ref="tableV2Ref" :data="state.tableData" :columns="state.columnData">
      <template #tableHeader>
        <div class="jcb aic w100">
          <h3 class="mx15">基础表格</h3>
          <el-button type="primary" @click="roleDrawer = true"
            >新增角色</el-button
          >
        </div>
      </template>
      <template #status>
        <el-table-column label="操作" fixed="right" align="right">
          <template #default="scope">
            <el-icon
              v-if="scope.row.edit"
              class="mx15"
              color="#67C23A"
              size="18px"
              @click="handleEdit(scope.$index, scope.row)"
              ><check
            /></el-icon>

            <el-button
              size="small"
              type="danger"
              class="mx15"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
      <template #operation>
        <el-table-column label="操作" fixed="right" align="right">
          <template #default="scope">
            <el-icon
              v-if="scope.row.edit"
              class="mx15"
              color="#67C23A"
              size="18px"
              @click="handleEdit(scope.$index, scope.row)"
              ><check
            /></el-icon>

            <el-button
              size="small"
              type="danger"
              class="mx15"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>
    <AllRight v-model="centerDialogVisible" />
        <addOrEdit v-model="roleDrawer" />
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";

import Column from "/@ts/components/table/Column";
import type { FormInstance } from "element-plus";
import AllRight from '/@/views/table/component/AllRight.vue'
import addOrEdit from '/@/views/table/component/addOrEdit.vue'
let centerDialogVisible = ref(false);
const roleDrawer = ref(false);
const handleEdit = (index: number) => {
  state.tableData[index].edit = false;
};
const formSize = ref("");
const ruleFormRef = ref<FormInstance>();
const editableTabsValue = ref("1");

interface User {
  date: string;
  name: string;
  address: string;
  edit: boolean;
  index: number;
}
const filterTag = (value: string, row: any, column: any) => {
  let bool: any = true;
  const property = column["property"];
  switch (property) {
    case "status":
      bool = row.status == value;
      break;
  }
  return bool;
};
const filters = (data: any) => {
  let bool: any = false;
  switch (data.prop) {
    case "status":
      bool = [
        { text: "开启", value: true },
        { text: "关闭", value: false },
      ];
      break;
  }
  return bool;
};
const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    {
      min: 3,
      max: 5,
      message: "Length should be 3 to 5",
      trigger: "blur",
    },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
});
const handleCurrentChangeRow = (val: User) => {
  for (let index = 0; index < state.tableData.length; index++) {
    state.tableData[index].edit = false;
  }
  state.tableData[val.index].edit = true;
  console.log(" state.tableData[val.index] :>> ", state.tableData[val.index]);
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
onMounted(() => {
  state.tableData = [];
  for (let index = 0; index < 42; index++) {
    state.tableData.push({
      edit: false,
      index: index,
      date: "2016-05-02",
      name: "王小虎",
      status: false,
      address: "上海市普陀区金沙江路 1518 弄",
    });
  }
});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

// computed(()=>{

//     return keys;
// });
const pageInfo = reactive({
  currentPage: 1,
  total: 100,
  pageSize: 40,
  pageSizes: [100, 200, 300, 400],
  layout: "total, prev, pager, next,sizes",
});
const tableV2Ref = ref();
const state: any = reactive({
  height: 0,
  columnData: [
    {
      label: "用户名称",
      prop: "date",
      visible: true,
      render: ({ row }: any) => {
        return (
          <el-link type="primary" onClick={() => handleGoDetail()}>
            {row.date}
          </el-link>
        );
      },
                  renderHeader: ({column}:any) => {
            return (      <filterBox
              title={column.label}
              valueKey={column.property}
              flterType="input"
              onChange={tableV2Ref.value.handleFilterBox}
              data={tableV2Ref.value.formFilter}
            ></filterBox>)
          },
      //  handleGoDetail
    },
    {
      label: "用户昵称",
      prop: "name",
      visible: true,
    },
    {
      label: "状态",
      prop: "status",
      visible: true,
    },

    {
      label: "手机号",
      prop: "address",
      visible: true,
    },
  
    {
      label: "创建时间",
      visible: true,
      prop: "address",
    },
  ],
  tableData: [],
});
const handleSeach = (size: number) => {
  console.log("size :>> ", size);
};
const getHeight = (height: number) => {
  state.height = height;
};
const handleGoDetail = () => {
  centerDialogVisible.value = true;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
</script>

<style scoped lang="scss"></style>
